<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="180px">
    <el-form-item label="属性名称：" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="商品类型：">
      <el-select v-model="form.productAttributeCategoryId">
        <el-option v-for="item in options" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="分类筛选样式:">
      <el-radio-group v-model="form.filterType">
        <el-radio :label="0">普通</el-radio>
        <el-radio :label="1">颜色</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="能否进行检索:">
      <el-radio-group v-model="form.searchType">
        <el-radio :label="0">不需要检索</el-radio>
        <el-radio :label="1">关键字检索</el-radio>
        <el-radio :label="2">范围检索</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品属性关联:">
      <el-radio-group v-model="form.relatedStatus">
        <el-radio :label="0">是</el-radio>
        <el-radio :label="1">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="属性是否可选:">
      <el-radio-group v-model="form.selectType">
        <el-radio :label="0">唯一</el-radio>
        <el-radio :label="1">单选</el-radio>
        <el-radio :label="2">复选</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="属性值的录入方式:">
      <el-radio-group v-model="form.inputType">
        <el-radio :label="0">手工录入</el-radio>
        <el-radio :label="1">从下面列表中选择</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="属性值可选值列表">
      <el-input v-model="form.inputList" type="textarea" />
    </el-form-item>
    <el-form-item label="是否支持手动新增:">
      <el-radio-group v-model="form.handAddStatus">
        <el-radio :label="0">是</el-radio>
        <el-radio :label="1">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="排序属性：">
      <el-input v-model="form.sort" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button v-if="!route.query.id" @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script lang="ts" setup>
import { user } from '@/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const cid = +(route.query.cid ? route.query.cid : 0)
const form = reactive({
  filterType: 0,
  name: '',
  productAttributeCategoryId: 0,
  relatedStatus: 0,
  searchType: 0,
  selectType: 0,
  inputType: 0,
  handAddStatus: 0,
  inputList: '',
  sort: 0,
  type: route.query.type
})

const rules = {
  name: [
    { required: true, message: "请输入属性名称", trigger: "blur" },
    { min: 2, max: 140, message: "名称要在2~140个字符之间", trigger: "blur" },
  ]
}

// 获取所有商品类型
const options = ref([{ label: '', value: 0 }])

// 新增编辑页面初始化
const getlist = () => {
  user.getListProductApi({
    pageNum: 1,
    pageSize: 100
  }).then((res) => {
    const obj = res.data.list.find(item => item.id === cid)
    // 把选择器默认值改为当前商品类型
    if (obj?.name) {
      form.productAttributeCategoryId = obj.id
    }
    options.value = res.data.list.map(item => {
      return { label: item.name, value: item.id }
    })
  })
  if(route.query.id){
    user.getAttributeApi(route.query.id).then((res) => {
      if (res.code === 200) {
                // 把数据给表单
                Object.assign(form, res.data)
                // Object.assign() 
            }
    })
  }
}
getlist()

// 重置功能
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 点击确定
const formRef = ref<FormInstance>()
const onSubmit = () => {
  
  formRef.value?.validate((valid: boolean) => {

    if (valid) {
      ElMessageBox.confirm("是否提交数据", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        if (route.query.id) {
          user.attributeParamEditApi(route.query.id,form).then((res) => { 
            if(res.code === 200) {
              ElMessage.success("修改信息成功")
              router.back()
            }
          })
          
        } else {
          user.attributeParamCreateApi(form).then((res) => { 
            if(res.code === 200) {
              ElMessage.success("添加成功")
              router.back()
            }
          })
          
        }
      })
    }else{
      return;
    }
  })
}
</script>
<style lang="less" scoped>
.el-form {
  border: 1px solid #ccc;
  padding: 10px;
  margin-left: 30%;

  .el-input {
    width: 40%;
  }
}
</style>